<!-- 服务模块 -->
<section id="<?php echo $data['type']; ?>" class="py-16 bg-white">
  <div class="container mx-auto px-4 sm:px-6 lg:px-8">
    <div class="text-center max-w-3xl mx-auto mb-16">
      <div class="inline-block px-4 py-1 bg-primary/10 text-primary rounded-full text-sm font-medium mb-4">
        <?php echo $data['content']['sectionBadge']; ?>
      </div>
      <h2 class="text-[clamp(1.5rem,3vw,2.5rem)] font-bold text-dark mb-4">
        <?php echo $data['content']['sectionTitle']; ?>
      </h2>
      <p class="text-dark/70">
        <?php echo $data['content']['sectionSubtitle']; ?>
      </p>
    </div>
    
    <!-- 服务卡片 -->
    <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
      <?php foreach($data['content']['items'] as $item){ ?>
      <div class="bg-light rounded-2xl p-8 shadow-sm hover:shadow-md transition duration-300">
        <div class="w-16 h-16 bg-primary/10 rounded-2xl flex items-center justify-center text-primary mb-6">
          <i class="fa fa-<?php echo $item['icon']; ?> text-2xl"></i>
        </div>
        <h3 class="text-xl font-bold mb-3"><?php echo $item['title']; ?></h3>
        <p class="text-dark/70 mb-6">
          <?php echo $item['description']; ?>
        </p>
        <a href="#" class="inline-flex items-center text-primary font-medium hover:underline">
          了解更多 <i class="fa fa-arrow-right ml-2"></i>
        </a>
      </div>
      <?php } ?>
    </div>
    
    <!-- CTA按钮 -->
    <?php if(!empty($data['content']['ctaButton'])){ ?>
    <div class="text-center mt-12">
      <a href="<?php echo $data['content']['ctaButton']['href']; ?>" class="inline-flex items-center justify-center px-8 py-3 border border-primary text-primary font-medium rounded-lg hover:bg-primary hover:text-white transition-colors duration-300">
        <?php echo $data['content']['ctaButton']['text']; ?>
      </a>
    </div>
    <?php } ?>
    </div>
    
    <!-- 服务流程 -->
    <div class="mt-24">
      <div class="text-center max-w-2xl mx-auto mb-16">
        <div class="inline-block px-4 py-1 bg-primary/10 text-primary rounded-full text-sm font-medium mb-4">
          服务流程
        </div>
        <h3 class="text-2xl font-bold mb-4">我们的服务流程</h3>
        <p class="text-dark/70">
          我们拥有一套完善的服务流程，确保每一个项目都能高质量、高效率地完成。从需求分析到系统上线，我们全程为客户提供专业的支持和服务。
        </p>
      </div>
      
      <div class="relative">
        <!-- 连接线 -->
        <div class="hidden md:block absolute left-0 right-0 top-1/2 h-1 bg-primary/20 transform -translate-y-1/2 z-0"></div>
        
        <!-- 流程步骤 -->
        <div class="grid grid-cols-1 md:grid-cols-4 gap-8 relative z-10">
          <!-- 步骤1 -->
          <div class="text-center">
            <div class="w-16 h-16 bg-primary text-white rounded-full flex items-center justify-center font-bold text-lg mx-auto mb-4">
              1
            </div>
            <h4 class="text-lg font-bold mb-2">需求分析</h4>
            <p class="text-dark/70 text-sm">
              深入了解客户需求，进行全面的需求分析和规划，为项目奠定坚实的基础。
            </p>
          </div>
          
          <!-- 步骤2 -->
          <div class="text-center">
            <div class="w-16 h-16 bg-primary text-white rounded-full flex items-center justify-center font-bold text-lg mx-auto mb-4">
              2
            </div>
            <h4 class="text-lg font-bold mb-2">方案设计</h4>
            <p class="text-dark/70 text-sm">
              根据需求分析结果，设计详细的解决方案，包括技术架构、功能模块和实现路径。
            </p>
          </div>
          
          <!-- 步骤3 -->
          <div class="text-center">
            <div class="w-16 h-16 bg-primary text-white rounded-full flex items-center justify-center font-bold text-lg mx-auto mb-4">
              3
            </div>
            <h4 class="text-lg font-bold mb-2">开发实施</h4>
            <p class="text-dark/70 text-sm">
              按照解决方案进行开发和实施，确保项目高质量、高效率地完成。
            </p>
          </div>
          
          <!-- 步骤4 -->
          <div class="text-center">
            <div class="w-16 h-16 bg-primary text-white rounded-full flex items-center justify-center font-bold text-lg mx-auto mb-4">
              4
            </div>
            <h4 class="text-lg font-bold mb-2">上线维护</h4>
            <p class="text-dark/70 text-sm">
              系统上线后，提供持续的技术支持和维护服务，确保系统稳定运行。
            </p>
          </div>
        </div>
      </div>
    </div>
  </div>
</section>